import React from 'react'
import styles from './index.module.less'
import { Link, withRouter } from 'react-router-dom'

const Home = (props) => {
	const menus = [
		{ name: 'md编辑器', path: '/mdEdit' },
		{ name: '头像截取', path: '/screenshot' },
		{ name: 'G2图表', path: '/charts' },
		{ name: '问卷', path: '/questionnaire' },
		{ name: 'demo', path: '/demo' },
		{ name: 'tab切换', path: '/tabShowDemo' },
		{ name: 'G6', path: '/g6' },
		{ name: 'me', path: '/me' },
		{ name: 'form', path: '/form' },
		{ name: 'g6-chart', path: '/g6-chart' },
		{ name: '面试题', path: '/interview' },
		{ name: 'G6可视化编辑', path: '/g6-editor' },
		{ name: 'G6用', path: '/g6-play' },
		{ name: '轮播图', path: '/carousel' },
		{ name: '进度条', path: '/progress' },
		{ name: 'memo', path: '/memo' },
		{ name: 'keep', path: '/keep' },
		{ name: '表格嵌套图表', path: '/tableChart' },
		{ name: 'excel', path: '/excel' },
		{ name: '随机吃', path: '/eatRandom' },
		{ name: '地图', path: '/map' },
		{ name: '虚拟列表', path: '/virtualList' },
		{ name: 'hooks', path: '/hooks' },
		{ name: 'requestAnimationFrame', path: '/requestAnimationFrame' },
		{ name: 'requestIdleCallback', path: '/requestIdleCallback' },
		{ name: 'useContext', path: '/useContext' },
		{ name: 'suspense', path: '/suspense' },
		{ name: 'dragPlay', path: '/drag-play' },
		{ name: 'useImperativeHandle', path: '/useImperativeHandle' },
		{ name: 'useComponents', path: '/useComponents' },
	]

	return (
		<div className={styles.home}>
			{menus.map((item, index) => {
				return (
					<Link key={index} to={item.path} className={styles.homeLink}>
						{item.name}
					</Link>
				)
			})}
		</div>
	)
}

export default withRouter(Home)
